import React, { ReactNode } from 'react'
import { View, Text, StyleSheet, Image, ScrollView } from 'react-native'
import Progress from '../../components/progress'
import BasePage from '../../common/basePage'
import Icon from 'react-native-vector-icons/AntDesign'
import { NavigationScreenOptions, NavigationScreenProps } from 'react-navigation'
import { Tabs } from '@ant-design/react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'

interface Plan {
  title: string;
  description: string;
  img: string;
  percent: number;
}
interface State{
  planList: Plan[];
}

export default class Page extends BasePage {
  public state: State = {
    planList: []
  }

  public static navigationOptions: NavigationScreenOptions = {
    title: '首页',
    headerStyle: {
      backgroundColor: '#7fa2ff',
      borderBottomWidth: 0,
      shadowOpacity: 0,
      elevation: 0
    },
    headerTitleStyle: {
      color: '#fff'
    }
  }

  public constructor (props: NavigationScreenProps) {
    super(props)
    this.state = {
      planList: [
        {
          title: '学习React Native',
          description: '1.熟练入门RN开发，能应付RN的业务开发需求 2.进一步深入学习，开发一定质量的RN组件',
          img: 'https://img.ui.cn/data/file/2/2/1/2631122.png?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!1200%3E/quality/90/',
          percent: 30
        },
        {
          title: '学习React Native2',
          description: '1.熟练入门RN开发，能应付RN的业务开发需求 2.进一步深入学习，开发一定质量的RN组件',
          img: 'https://img.ui.cn/data/file/8/2/1/2631128.png',
          percent: 30
        },
        {
          title: '学习React Native2',
          description: '1.熟练入门RN开发，能应付RN的业务开发需求 2.进一步深入学习，开发一定质量的RN组件',
          img: 'https://img.ui.cn/data/file/8/2/1/2631128.png',
          percent: 30
        },
        {
          title: '学习React Native2',
          description: '1.熟练入门RN开发，能应付RN的业务开发需求 2.进一步深入学习，开发一定质量的RN组件',
          img: 'https://img.ui.cn/data/file/8/2/1/2631128.png',
          percent: 30
        },
        {
          title: '学习React Native2',
          description: '1.熟练入门RN开发，能应付RN的业务开发需求 2.进一步深入学习，开发一定质量的RN组件',
          img: 'https://img.ui.cn/data/file/8/2/1/2631128.png',
          percent: 30
        },
        {
          title: '学习React Native2',
          description: '1.熟练入门RN开发，能应付RN的业务开发需求 2.进一步深入学习，开发一定质量的RN组件',
          img: 'https://img.ui.cn/data/file/8/2/1/2631128.png',
          percent: 30
        }
      ]
    }

    this._navigate('PlanView')
  }

  public renderPlainList (): ReactNode[] {
    return this.state.planList.map((item: Plan, index: number): ReactNode => {
      return (
        <TouchableOpacity style={styles.plan_item} key={index} onPress={(): void => this._navigate('PlanView')} >
          <Image source={{ uri: item.img }} style={{ width: 100, height: 100 }} />
          <View style={styles.plan_mid}>
            <Text style={styles.plan_title}>{item.title}</Text>
            <Text style={styles.plan_description}>{item.description}</Text>
          </View>
          <View style={styles.plan_right}>
            <Progress percent={item.percent} radius={20} borderWidth={3} />
          </View>
        </TouchableOpacity>
      )
    })
  }

  public render (): ReactNode {
    return (
      <View style={{ position: 'relative', flex: 1 }}>
        {/* <ScrollView style={{ marginTop: -25 }}> */}

        {/* <View style={styles.header}>
          <View style={styles.tab}>
            <Text style={styles.tab_item}>计划</Text>
            <Text style={styles.tab_item}>笔记</Text>
          </View>
        </View> */}
        <Tabs tabs={[
          { title: '计划' },
          { title: '笔记' }
        ]}>
          <ScrollView>
            <View style={styles.plan_list}>
              { this.renderPlainList()}
            </View>
          </ScrollView>
          <View>
            <Text>1232</Text>
          </View>
          <View>
            <Text>1232</Text>
          </View>
        </Tabs>
        <View style={styles.addIcon}>
          <Icon name='plus' size={20} color='#fff' onPress={(): void => this._navigate('PlanEdit')} />
        </View>
      </View>
    )
  }
}
const backgroundColor = '#7fa2ff'
const styles = StyleSheet.create({
  header: {
    backgroundColor: backgroundColor,
    color: '#fff',
    height: 100,
    width: '100%'
  },
  tab: {
    flex: 1,
    color: '#fff',
    flexDirection: 'row',
    alignItems: 'center'
  },
  tab_item: {
    flex: 1,
    color: '#fff',
    textAlign: 'center',
    justifyContent: 'center'
  },
  plan_list: {
    width: '100%',
    alignItems: 'center'
    // marginTop: -25
  },
  plan_item: {
    backgroundColor: '#fff',
    height: 120,
    borderRadius: 10,
    width: '90%',
    shadowColor: '#000',
    shadowOffset: { width: 2, height: 2 },
    shadowOpacity: 1,
    shadowRadius: 6,
    elevation: 10,
    flexDirection: 'row',
    padding: 10,
    marginBottom: 10
  },
  plan_mid: {
    marginLeft: 20,
    paddingVertical: 10,
    flex: 1
  },
  plan_title: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#000'
  },
  plan_description: {
    fontSize: 12,
    color: '#777',
    marginTop: 10
  },
  plan_right: {
    width: 60,
    alignItems: 'center',
    justifyContent: 'center'
  },
  addIcon: {
    position: 'absolute',
    backgroundColor: '#7eb7ff',
    bottom: 50,
    right: 30,
    width: 30,
    height: 30,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 15
  }
})
